<template>
<el-row class="home" :gutter = '23'>
  <el-col :span = '11' style="margin-top:20px">
    <el-card shadow='hover' style="margin-bottom:20px">
    <div style="margin-bottom:40px;text-align:center;">
    <h2>欢迎登录解剖图谱管理系统</h2>
  </div>
  <div class="btn">
    <el-button @click="toCT" type='primary'>导入CT图谱</el-button>
    <el-button @click="toMRI" type='primary'>导入MRI图谱</el-button>
    <el-button @click="toUser" type='primary'>账号管理</el-button>
  </div>
  </el-card>
    <el-card shadow='hover'>
    <div class="information" >
    <div><img class="user02" :src="userImg"></div>
    <el-table
      show-overflow-tooltip
      :data="perInfoData"
      stripe border
    >
      <el-tableColumn label="用户ID" prop="userID" width="112"></el-tableColumn>
      <el-tableColumn label="用户名" prop="name" width="113"></el-tableColumn>
      <el-tableColumn label="性别" prop="sex" width="112"></el-tableColumn>
      <el-tableColumn label="身份" prop="identity" width="113"></el-tableColumn>
    </el-table>
  </div></el-card>
  </el-col>
  <el-col :span = '12'>
    <div class="count" style="margin:20px" >
      <el-card style="margin:10px" :body-style="{display:'flex'}">
        <i :class="`el-icon-s-order`" ></i>
        <div class="detail1">
          <p class="tit1">解剖图谱总数</p>
          <p class="num1">{{countCT+countMRI}}</p>
        </div>
      </el-card>
      <el-card style="margin:10px" :body-style="{display:'flex'}">
        <i :class="`el-icon-s-order`" ></i>
        <div class="detail2">
          <p class="tit2">CT 图谱数</p>
          <p class="num2">{{countCT}}</p>
        </div>
      </el-card>
      <el-card style="margin:10px" :body-style="{display:'flex'}">
        <i :class="`el-icon-s-order`" ></i>
        <div class="detail3">
          <p class="tit3">MRI 图谱数</p>
          <p class="num3">{{countMRI}}</p>
        </div>
      </el-card>
      <el-card style="margin:10px" :body-style="{display:'flex'}">
        <i :class="`el-icon-s-order`" ></i>
        <div class="detail4">
          <p class="tit4">用户总数</p>
          <p class="num4">{{countUser}}</p>
        </div>
      </el-card>
    </div>
  </el-col>
</el-row>
</template>

<script>
export default {
    name:'home',
    data() {
        return{
          queryInfo:{
            query:''
          },
          countCT:0,
          countMRI:0,
          countUser:0,
          perInfoData:[],
          userImg:require('../../assets/images/user.png'),
        }
    },
    created() {
      this.getUser(),
      this.getCountCT(),
      this.getCountMRI(),
      this.getCountUser()
    },
    methods:{
      toCT(){
        this.$router.push({name:'importCT'})
      },
      toMRI(){
        this.$router.push({name:'importMRI'})
      },
      toUser(){
        this.$router.push({name:'users'})
      },
      async getUser() {
        const id = localStorage.id
        const { data: res } = await this.$http.get('page/perInfo/'+id, {
          params: this.queryInfo
        })
        this.perInfoData = res.data
        console.log(res)
      },
      async getCountCT(){
        const{data:res} = await this.$http.get('count/countCT',{})
        this.countCT = res.data[0].num
        console.log(data)
      },
      async getCountMRI(){
        const{data:res} = await this.$http.get('count/countMRI',{
          params:this.countMRI
        })
        this.countMRI = res.data[0].num
        console.log(this.countMRI)
      },
      async getCountUser(){
        const{data:res} = await this.$http.get('count/countUser',{
          params:this.countUser
        })
        this.countUser = res.data[0].num
        console.log(this.countUser)
      },
    }
}
</script>
<style hang="less" scoped>
.user02{
  margin-top: 80px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: relative;
  left: 50%;
  transform: translate(-50%,-50%);
}
.h2 {
  text-align:center;
  font-size:24px;
}
.message{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.btn{
  display: flex;
  justify-content: space-between;
}
.el-icon-s-order{
  background: #409EFF;
  width:80px;
  height:80px;
  padding: 0;
  text-align:center;
  font-size: 30px;
  line-height: 80px;
  color: #fff;
}
.num1,.num2,.num3,.num4 {
  font-size: 24px;
  margin: 10px;
}
.tit1,.tit2,.tit3,.tit4 {
  font-size: 16px;
  padding: 0;
  margin: 10px;
  color: #999999;
}
.detail1,.detail2,.detail3,.detail4 {
    margin-left: 15px;
    flex-direction: column;
}
</style>
